<template>
    <view>
        <form @submit="saveUser" action="">
            <view class="line">
                <view class="left">头像</view>
                <view class="right">
                    <button class="btnAvatar" open-type="chooseAvatar" @chooseavatar="chooseavatar">
                        <image class="avatar" :src="formData.avatar"></image>
                    </button>
                    <view class="arrow"></view>
                </view>
            </view>
            <view class="line">
                <view class="left">昵称</view>
                <view class="right">
                    <input type="nickname" name="nickname" :value="formData.nickname" />
                    <view class="arrow"></view>
                </view>
            </view>
            <view class="line">
                <view class="left">真实姓名</view>
                <view class="right">
                    <input type="text" name="name" :value="formData.name" />
                    <view class="arrow"></view>
                </view>
            </view>
            <view class="line">
                <view class="left">手机号码</view>
                <view class="right">
                    <input type="text" name="mobile" :value="formData.mobile" />
                    <view class="arrow"></view>
                </view>
            </view>
            <view class="btnLogin">
                <button form-type="submit" type="primary">立即保存</button>
            </view>
        </form>
    </view>
</template>


<script>
    export default {
        data() {
            return {
                formData: {}, //表单数据
            };
        },
        //页面加载完成时触发
        onLoad() {
            //1.获取用户信息
            this.initData()
        },
        methods: {
            //1.获取表单数据
            async initData() {
                this.formData = await uni.$http.get('/user/profile')
            },
            //2.获取头像信息
            chooseavatar(event) {
                //event.detail.avatarUrl  头像路径
                //1. 获取到头像临时路径：   event.detail.avatarUrl 获取到头像的临时路径  【临时的，会失效的】
                // const avatarUrl = event.detail.avatarUrl
                //2.将这个临时路径的图片上传到自己的服务器保存起来，返回自己服务器的保存地址  【保存自己的服务器，永久存在】
                // uni.uploadFile()可以来实现上传文件，实现将临时路径的图片资源上传到自己的服务器
                // uni.uploadFile({
                //     url: , //接口地址
                //     filePath: avatarUrl, //临时路径
                //     name: 'file',
                //     formData: {
                //         'user': 'test'
                //     },
                //     success(res) {
                //         // 获取到真实的存储在我们后端服务器上面的地址
                //         const data = res.data
                //     }
                // })

                // 3. 将头像地址存储到formData里面去
                this.formData.avatar = event.detail.avatarUrl
            },
            //3.表单提交保存用户信息
            async saveUser(event) {
                // console.log(event);
                // event.detail.value 是表单的数据
                const res = await uni.$http.post('/user/update', {
                    ...event.detail.value,
                    avatar: this.formData.avatar
                })
                console.log(res);
                //提交后就能获取到最新的用户信息，同步到vuex中
                this.$store.commit('user/setUserInfo', res)
                //提示保存成功
                uni.showToast({
                    title: '信息更新成功',
                    icon: 'none'
                })
            }
        }
    }
</script>

<style lang="scss">
    .line {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        line-height: 88rpx;
        padding: 0 30rpx;
        align-items: center;

        .right {
            height: 80rpx;
            display: flex;
            align-items: center;
        }

        .arrow {
            border-top: 1px solid #aaa;
            border-right: 1px solid #aaa;
            width: 20rpx;
            height: 20rpx;
            transform: rotateZ(45deg);
        }

        input {
            text-align: right;
            width: 240rpx;
        }
    }

    .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
    }

    .btnAvatar {
        background-color: #fff;
        width: 100%;
        display: block;
        padding: 0;
        height: 80rpx;
        border: none;
        border-radius: 0;
    }

    .btnLogin {
        margin: 40rpx;
    }
</style>
